<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="logo">
        <text class="logo-text">🍜 美味餐厅</text>
      </view>
      <view class="header-actions">
        <view class="language-switch" @click="switchLanguage">
          <text>{{ currentLanguage === 'zh-CN' ? 'EN' : '中文' }}</text>
        </view>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <input
        class="search-input"
        :placeholder="t('searchPlaceholder')"
        v-model="searchKeyword"
        @confirm="handleSearch"
      />
      <text class="search-icon" @click="handleSearch">🔍</text>
    </view>

    <!-- 分类导航 -->
    <scroll-view class="category-scroll" scroll-x="true">
      <view 
        v-for="category in categories" 
        :key="category.value"
        :class="['category-item', { active: activeCategory === category.value }]"
        @click="selectCategory(category.value)"
      >
        <text>{{ category.label }}</text>
      </view>
    </scroll-view>

    <!-- 推荐菜品 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">{{ t('featuredDishes') }}</text>
        <text class="section-more" @click="navigateToMenu">{{ t('viewAll') }} ›</text>
      </view>
      
      <scroll-view class="featured-scroll" scroll-x="true">
        <view 
          v-for="item in featuredItems" 
          :key="item.id"
          class="featured-item"
          @click="viewItemDetail(item)"
        >
          <image :src="item.image || '/static/food/default.jpg'" class="featured-image" />
          <view class="featured-info">
            <text class="featured-name">{{ currentLanguage === 'zh-CN' ? item.name : item.name_en }}</text>
            <text class="featured-price">${{ item.price }}</text>
            <text class="featured-desc">{{ currentLanguage === 'zh-CN' ? item.description : item.description_en }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 热门分类 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">{{ t('popularCategories') }}</text>
      </view>
      
      <view class="category-grid">
        <view 
          v-for="cat in popularCategories" 
          :key="cat.value"
          class="category-card"
          @click="selectCategory(cat.value)"
        >
          <view class="category-icon">
            <text>{{ cat.icon }}</text>
          </view>
          <text class="category-name">{{ cat.label }}</text>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <view class="nav-item" @click="navigateTo('index')">
        <text class="nav-icon">🏠</text>
        <text class="nav-text">{{ t('home') }}</text>
      </view>
      <view class="nav-item" @click="navigateToMenu">
        <text class="nav-icon">📋</text>
        <text class="nav-text">{{ t('menu') }}</text>
      </view>
      <view class="nav-item" @click="navigateTo('cart')">
        <text class="nav-icon">🛒</text>
        <text class="nav-text">{{ t('cart') }}</text>
        <view v-if="cartCount > 0" class="cart-badge">{{ cartCount }}</view>
      </view>
      <view class="nav-item" @click="navigateTo('orders')">
        <text class="nav-icon">📦</text>
        <text class="nav-text">{{ t('orders') }}</text>
      </view>
      <view class="nav-item" @click="navigateTo('profile')">
        <text class="nav-icon">👤</text>
        <text class="nav-text">{{ t('profile') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      searchKeyword: '',
      activeCategory: 'all',
      currentLanguage: uni.getStorageSync('language') || 'zh-CN',
      featuredItems: [],
      categories: [
        { value: 'all', label: '全部' },
        { value: 'appetizers', label: '开胃菜' },
        { value: 'main-courses', label: '主菜' },
        { value: 'noodles', label: '面条' },
        { value: 'rice', label: '米饭' },
        { value: 'drinks', label: '饮料' },
        { value: 'desserts', label: '甜点' }
      ],
      popularCategories: [
        { value: 'appetizers', label: '开胃菜', icon: '🥟' },
        { value: 'main-courses', label: '主菜', icon: '🍲' },
        { value: 'noodles', label: '面条', icon: '🍜' },
        { value: 'drinks', label: '饮料', icon: '🥤' }
      ]
    }
  },

  computed: {
    ...mapState(['cartCount']),
    
    t() {
      return (key) => {
        const translations = {
          'zh-CN': {
            searchPlaceholder: '搜索菜品...',
            featuredDishes: '推荐菜品',
            viewAll: '查看全部',
            popularCategories: '热门分类',
            home: '首页',
            menu: '菜单',
            cart: '购物车',
            orders: '订单',
            profile: '我的'
          },
          'en-US': {
            searchPlaceholder: 'Search dishes...',
            featuredDishes: 'Featured Dishes',
            viewAll: 'View All',
            popularCategories: 'Popular Categories',
            home: 'Home',
            menu: 'Menu',
            cart: 'Cart',
            orders: 'Orders',
            profile: 'Profile'
          }
        }
        return translations[this.currentLanguage][key] || key
      }
    }
  },

  onLoad() {
    this.loadFeaturedItems()
    this.loadCartCount()
  },

  methods: {
    ...mapMutations(['setCartCount']),

    async loadFeaturedItems() {
      try {
        const res = await uni.request({
          url: 'http://localhost/api/menu',
          method: 'GET'
        })
        
        if (res.data.success) {
          this.featuredItems = res.data.data.slice(0, 5) // 取前5个作为推荐
        }
      } catch (error) {
        console.error('加载推荐菜品失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },

    loadCartCount() {
      const cart = uni.getStorageSync('cart') || []
      this.setCartCount(cart.length)
    },

    handleSearch() {
      if (this.searchKeyword.trim()) {
        uni.navigateTo({
          url: `/pages/menu/menu?search=${encodeURIComponent(this.searchKeyword)}`
        })
      }
    },

    selectCategory(category) {
      this.activeCategory = category
      uni.navigateTo({
        url: `/pages/menu/menu?category=${category}`
      })
    },

    viewItemDetail(item) {
      uni.navigateTo({
        url: `/pages/menu/detail?id=${item.id}`
      })
    },

    navigateTo(page) {
      if (page === 'index') return
      uni.switchTab({
        url: `/pages/${page}/${page}`
      })
    },

    navigateToMenu() {
      uni.navigateTo({
        url: '/pages/menu/menu'
      })
    },

    switchLanguage() {
      this.currentLanguage = this.currentLanguage === 'zh-CN' ? 'en-US' : 'zh-CN'
      uni.setStorageSync('language', this.currentLanguage)
      uni.showToast({
        title: this.currentLanguage === 'zh-CN' ? '切换为中文' : 'Switched to English',
        icon: 'success'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 0;
  background: linear-gradient(180deg, #ff6b6b 0%, #ff9e6b 100%);
  min-height: 100vh;
}

.header {
  padding: 40rpx 30rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
}

.logo-text {
  font-size: 40rpx;
  font-weight: bold;
  color: white;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.header-actions {
  display: flex;
  align-items: center;
}

.language-switch {
  background: rgba(255,255,255,0.2);
  padding: 12rpx 20rpx;
  border-radius: 30rpx;
  color: white;
  font-size: 28rpx;
  font-weight: 500;
}

.search-box {
  padding: 0 30rpx 30rpx;
  position: relative;
}

.search-input {
  background: white;
  border-radius: 50rpx;
  padding: 24rpx 80rpx 24rpx 30rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

.search-icon {
  position: absolute;
  right: 50rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36rpx;
  color: #999;
}

.category-scroll {
  white-space: nowrap;
  padding: 20rpx 30rpx;
  background: white;
  border-radius: 30rpx 30rpx 0 0;
}

.category-item {
  display: inline-block;
  padding: 16rpx 32rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  background: #f8f8f8;
  color: #666;
  font-size: 28rpx;
}

.category-item.active {
  background: #ff6b6b;
  color: white;
}

.section {
  background: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 28rpx;
  color: #ff6b6b;
}

.featured-scroll {
  white-space: nowrap;
}

.featured-item {
  display: inline-block;
  width: 280rpx;
  margin-right: 20rpx;
  background: #f8f8f8;
  border-radius: 20rpx;
  overflow: hidden;
}

.featured-image {
  width: 100%;
  height: 200rpx;
  background: #e0e0e0;
}

.featured-info {
  padding: 20rpx;
}

.featured-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.featured-price {
  font-size: 32rpx;
  color: #ff6b6b;
  font-weight: bold;
  display: block;
  margin: 10rpx 0;
}

.featured-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.category-card {
  text-align: center;
  padding: 30rpx 20rpx;
  background: #f8f8f8;
  border-radius: 20rpx;
}

.category-icon {
  font-size: 48rpx;
  margin-bottom: 15rpx;
}

.category-name {
  font-size: 24rpx;
  color: #666;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.nav-item {
  position: relative;
  text-align: center;
}

.nav-icon {
  font-size: 40rpx;
  display: block;
}

.nav-text {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-top: 8rpx;
}

.cart-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #ff6b6b;
  color: white;
  font-size: 20rpx;
  padding: 6rpx 12rpx;
  border-radius: 30rpx;
  min-width: 30rpx;
  text-align: center;
}
</style>